<template>
	<el-dialog :visible.sync="loginDialogVisible" size="middle" class="login-dialog">
		<el-tabs v-model="activeName" type="card">

			<el-tab-pane label="登录" name="login">
				<el-form :model="loginForm" :rules="rules1" label-width="80px" ref="loginForm" label-position="left" class="demo-ruleForm login-container">
					<div>
						<!--<h3 class="title">系统登录</h3>-->
						<el-form-item prop="account" label="账号">
							<el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
						</el-form-item>
						<el-form-item prop="checkPass" label="密码">
							<el-input type="password" v-model="loginForm.checkPass" auto-complete="off" placeholder="密码"></el-input>
						</el-form-item>
						<el-checkbox v-model="check1" checked class="remember">记住密码</el-checkbox>
						<!--<el-form-item style="width:100%;">-->
						<el-button type="primary" style="width:80%;;margin:0 auto;display: block;color:#fff;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
						<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
						<!--</el-form-item>-->
					</div>

				</el-form>
			</el-tab-pane>
			<el-tab-pane label="注册" name="regist">
				<el-form :model="registForm" label-width="80px" :rules="rules2" ref="registForm" label-position="left" class="demo-ruleForm login-container">
					<div>
						<!--<h3 class="title">系统注册</h3>-->
						<el-form-item prop="account" label="账号">
							<el-input type="text" v-model="registForm.account" auto-complete="off" placeholder="请输入用户名"></el-input>
						</el-form-item>
						<el-form-item prop="email" label="邮箱">
							<el-input type="email" v-model="registForm.email" auto-complete="off" placeholder="请输入常用邮箱"></el-input>
						</el-form-item>
						<el-form-item prop="phone" label="手机号">
							<el-input type="text" v-model="registForm.phone" auto-complete="off" placeholder="请输入绑定手机号"></el-input>
						</el-form-item>
						<el-form-item prop="code" label="验证码">
							<el-input type="text" v-model="registForm.code" ref="code" auto-complete="off" placeholder="请输入验证码" style="width: 40%;margin-right: 10px;"></el-input>
							<el-button type="primary" :class="codeCd!=60?'disable':''" @click="getMobCode" :loading="codeLoading" style="width:112px;color:#fff;">{{codeCd!=60?(codeCd+'s'):'获取验证码'}}</el-button>
						</el-form-item>
						<el-form-item prop="pwd1" label="密码">
							<el-input type="password" v-model="registForm.pwd1" auto-complete="off" placeholder="请输入6-20位密码"></el-input>
						</el-form-item>
						<el-form-item prop="pwd2" label="密码">
							<el-input type="password" v-model="registForm.pwd2" auto-complete="off" placeholder="请再次输入密码"></el-input>
						</el-form-item>
						<el-checkbox v-model="check2" class="remember">同意注册协议</el-checkbox>
						<!--<el-form-item style="width:100%;">-->
						<el-button type="primary" style="width:80%;margin:0 auto;display: block;color:#fff;" @click.native.prevent="doReg" :loading="registLoading">注册</el-button>
						<!--</el-form-item>-->
					</div>

				</el-form>
			</el-tab-pane>
		</el-tabs>

	</el-dialog>

</template>

<script>
	import api from '../../api'
	//import NProgress from 'nprogress'
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loginDialogVisible: false,
				activeName: 'login',
				logining: false,
				registLoading: false,
				codeLoading: false,
				loginForm: {
					account: '',
					checkPass: ''
				},
				rules1: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					checkPass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				registForm: {
					account: '',
					email: '',
					phone: '',
					code: '',
					pwd1: '',
					pwd2: ''
				},
				rules2: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱号',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					pwd1: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					pwd2: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}]

				},
				codeTimer: '',
				codeCd: 60,
				check1: true,
				check2: true
			};
		},
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				isLogin: state => state.vux.isLogin,
				sid: state => state.vux.sid,  //websocket id
				wsLogin: state => state.vux.wsLogin ,
				
			})
		},
		mixins: [taskAndTag, mixinPc],
		methods: {
			handleReset2() {
				this.$refs.loginForm.resetFields();
			},
			handleSubmit2(ev) {
				var _this = this;
				this.$refs.loginForm.validate((valid) => {
					if(valid) {
						this.logining = true;
						var loginParams = {
							username: this.loginForm.account,
							password: this.loginForm.checkPass
						};
						api.login(loginParams).then(data => {
							this.logining = false;
							if(data && data.errno == 0) {
								localStorage.removeItem('tagTmpSortArr')
								data = data.data;
								localStorage.setItem('timeUserInfo', JSON.stringify(data))
								_this.$store.commit(Object.assign({
									type: "user"
								}, data));
								_this.$store.commit({
									type: 'uid',
									uid: data.uid
								});

								_this.usertask(data.uid);
								_this.loginDialogVisible = false;

								//记住密码
								if(this.check1) {
									localStorage.setItem('rememberUserInfo', JSON.stringify({
										account: this.loginForm.account,
										pwd: this.loginForm.checkPass
									}))
								} else {
									this.loginForm.account=''
									this.loginForm.checkPass=''
									localStorage.removeItem('rememberUserInfo')
								}
							} else {
								_this.$message({
									message: data.errmsg,
									type: 'error'
								});
							}
						});
					}
				});
			},
			getMobCode() {
				let _this = this;
				if(this.codeCd != 60) {
					return;
				}
				
				var phoneReg = /^1[0-9][0-9]\d{4,8}$/
				if(!phoneReg.test(this.registForm.phone)) {
					_this.$message({
						message: "手机号错误",
						type: 'warning'
					});
					return;
				}
				this.codeLoading = true;
				api.mobCode({
					mobile: this.registForm.phone,
					type: 1
				}).then(data => {
					_this.codeLoading = false;
					if(data && data.errno == 0) {
						_this.$message({
							message: data.msg || data.errmsg,
							type: 'warning'
						});
					}
					//this.$vux.toast.show({text: "获取成功",type: 'success',time: 1500})
					this.smsCodeCD = '60';
					if(this.codeTimer) {
						clearInterval(this.codeTimer)
					}
					this.codeTimer = setInterval(function() {
						_this.codeCd--;
						if(_this.codeCd == 0) {
							_this.codeCd = 60
							clearInterval(_this.codeTimer)
						}
					}, 1000)
				}).catch(result=>{
					this.codeLoading = false;
					this.$message({
						message: '请勿重复获取验证码',
						type: 'warning'
					});
				});
			},
			doReg() {
				this.$refs.registForm.validate((valid) => {
					if(valid) {
						let _this = this;
						if(this.registForm.pwd1 != this.registForm.pwd2) {
							_this.$message({
								message: '两次密码不一致',
								type: 'warning'
							});
							return;
						}
						if(!this.check2) {
							_this.$message({
								message: '请勾选同意注册协议',
								type: 'warning'
							});
							return;
						}
						this.registLoading = true;
						api.reg({
							// 二次验证所需的三个值
							username: this.registForm.account,
							email: this.registForm.email,
							mobile: this.registForm.phone,
							verifycode: this.registForm.code,
							password: this.registForm.pwd1,
							password2: this.registForm.pwd2,
							//							openid: this.openid,
							clause: "on",
							custom: 1,
							type: 1,
						}).then(data => {
							this.registLoading = false
							if(data.errno != 0) {
								return _this.$message({
									message: data.errmsg,
									type: 'error'
								})
							};
							_this.activeName = 'login';
							data = data.data;
							_this.$message({
								message: '注册成功',
								type: 'success'
							})
							//注册完登录
							this.loginForm.account=this.registForm.account;
							this.loginForm.checkPass=this.registForm.password;
							this.handleSubmit2();
							this.$refs.registForm.resetFields()
						})
					}
				})

			},
		},
		mounted() {
			if(!localStorage.getItem('timeUserInfo')) {
				this.loginDialogVisible = true;
			}
			var rememberInfo = JSON.parse(localStorage.getItem('rememberUserInfo'))
			if(rememberInfo) {
				this.loginForm.account = rememberInfo.account;
				this.loginForm.checkPass = rememberInfo.pwd;
			}
		}
	}
</script>

<style>
	.login-dialog .el-dialog__header {
		display: none;
	}
	
	.login-dialog .el-tabs__nav {
		width: 100%;
		text-align: center;
	}
	
	.login-dialog .el-tabs__header {
		margin: 0;
	}
	
	.login-dialog .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
		width: 50%;
	}
	
	.login-dialog .el-tabs--card>.el-tabs__header .el-tabs__item {
		transition: none;
	}
	
	.login-container {
		/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 0 auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		box-sizing: content-box;
		border-top: 0;
	}
	
	.login-container .title {
		margin: 0px auto 35px auto;
		text-align: center;
		color: #505458;
		font-size: 20px;
	}
	
	.login-container .el-form-item {
		margin-bottom: 10px;
	}
	
	.login-container .remember {
		margin: 0px 0px 25px 0px !important;
	}
	.login-container .el-form-item__error{
		padding-top: 0;
		margin-top:-5px;
	}
	.el-button.disable {
		background: #aaa;
		border: 1px solid #aaa;
	}
</style>